<template>
  <view class="page">
    <view class="course-list" v-if="!noData">
      <!-- 列表每一项盒子 -->
      <view class="course-item" v-for="item in courseList" @click="courseItemClick(item)" :key="item.id">
       <!-- 图片 -->
        <image class="banner" :src="getShowImage(item.topCarouselList[0])"></image>
        <view class="content">
          <!-- 标题盒 -->
          <view class="name">
            <!-- 标题 -->
            <text class="text">{{ item.className }}</text>
            <!--						已购买且商品金额大于0时才展示-->
            <text class="text" style="color: var(--text-color-light)" v-if="item.isRegistered === 1 && item.price > 0">\t(已购买)</text>
          </view>
          <!-- 小tag盒 -->
          <view class="tag-list row">
            <view class="tag-item" v-for="tag in item.tagsList" :key="tag">{{ tag }}</view>
						<view class="team-buying-tag tag-item">可拼团</view>
          </view>
          <!-- 文本总盒 -->
          <view class="footer">
            <!-- 详情盒 -->
            <view class="view-detail-btn">
              <text>查看详情</text>
              <text>{{ " >" }}</text>
            </view>
          </view>
        </view>
      </view>
      <view style="display: flex; width: 100%; justify-content: center">
        <uni-load-more :status="loadMoreStatusText"></uni-load-more>
      </view>
    </view>
  </view>
</template>

<script>
import request from "../../../utils/request"
import { getShowImage } from "@/utils"
import banner from "@/components/banner.vue"
export default {
  computed: {
    // appListRender() {
    //   return arrayUtils.toTwoDimensionalArray(this.appList, 5)
    // },
  },
  components: { banner },
  data() {
    return {
      // 课程列表
      courseList: [],
      // 分页
      pagination: {
        current: 1,
        size: 10,
      },
      loadMoreStatusText: "more",
      noData: false,
    }
  },
  async onLoad() {
    this.getCourseList()
  },

  methods: {
    // 获取图片
    getShowImage,
    //获取课程列表
    getCourseList() {
      this.loadMoreStatusText = "loading"
      request({
        url: "courseClass/getCourseClassPage",
        data: {
          ...this.pagination,
          ...this.searchForm,
        },
        errorHandle: true,
      })
        .then((data) => {
          if (data.total === 0) {
            this.noData = true
            return
          }
          this.courseList.push(...data.records)
          if (this.courseList.length >= data.total) {
            this.loadMoreStatusText = "noMore"
          } else {
            this.loadMoreStatusText = "more"
          }
        })
        .catch(() => {
          this.loadMoreStatusText = "more"
        })
    },
    //课程点击
    async courseItemClick(item) {
      this.lastOpenCourseId = item.id
      uni.navigateTo({ url: "/pages/course/detail?id=" + item.id })
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  //列表页面
  .course-list {
    // padding: 24rpx;
    // display: flex;
    // flex-wrap: wrap;

    // 每一项
    .course-item {
      // border-radius: 20rpx;
      // background: white;
      // margin-bottom: 24rpx;
      // width: calc(50% - 13rpx);
      // overflow: hidden;
      // height: max-content;
      // &:nth-child(odd) {
      //   margin-right: 24rpx;
      // }
    }

    // 图片
    .banner {
      // width: 100%;
      // height: 220rpx;
    }
    // 文本标题
    .content {
      // padding: {
      //     left: 18rpx;
      //     right: 18rpx;
      //     bottom: 18rpx;
      //   }
      .name {
        // margin-top: 14rpx;
        //   font-size: 30rpx;
        //   font-weight: 500;
        .text {
          // text-overflow: ellipsis;
          //   word-wrap: break-word;
          //   display: block;
        }
      }
      // 小标题列表
      .tag-list {
        // .tag-item {
        //   margin-right: 16rpx;
        //   font-size: 26rpx;
        //   // css用变量
        //   color: var(--text-color-theme);
        //   margin-bottom: 18rpx;
        //   &.team-buying-tag {
        //     color: #e83030;
        //   }
        // }
      }
      // 查看详情
      .footer {
        .view-detail-btn {
          // width: 100%;
          // height: 48rpx;
          // display: flex;
          // align-items: center;
          // justify-content: center;
          // background: #fff4cc;
          // font-size: 26rpx;
          // color: #a77e00;
          // border-radius: 8rpx 8rpx 8rpx 8rpx;
        }
      }
    }
  }
}
</style>
